<template>
  <dtDialog
    :title="textMap[dialogStatus]"
    :visible.sync="timerVisible"
    :is-loading="loading"
    :footer-slot="dialogStatus=='see'?true:false"
    @closeDialog="resetTimerTemp"
    @comfirmBtn="submit"
  >
    <el-form
      ref="timerDataForm"
      slot="content"
      :rules="timerRules"
      :model="timerTemp"
      label-position="right"
      label-width="138px"
    >
      <el-form-item label="任务名称" prop="timerName">
        <el-input v-model.trim="timerTemp.timerName" maxlength="30" :disabled="dialogStatus=='see'"
                  placeholder="请输入任务名称" class="limit" show-word-limit />
      </el-form-item>
      <el-form-item label="任务CLASS" prop="actionClass">
        <el-select
          v-model.trim="timerTemp.actionClass"
          style="width: 100%"
          class="filter-item"
          :disabled="dialogStatus=='see'"
          placeholder="请选择任务CLASS"
          @change="classChange"
        >
          <el-option
            v-for="(item,index) in actionClassList"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="20">
          <el-form-item label="CRON表达式" prop="cron">
            <el-input v-model.trim="timerTemp.cron" disabled placeholder="请生成CRON表达式" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button :disabled="dialogStatus=='see'" @click="addCron">生成表达式</el-button>
          <dt-Vcrontab ref="vcrontabRef" v-model.trim="timerTemp.cron" />
        </el-col>
      </el-row>
      <el-form-item label="任务参数" prop="params">
        <el-input v-model.trim="timerTemp.params" :autosize="{ minRows: 4, maxRows: 5}" maxlength="200"
                  type="textarea" :disabled="dialogStatus=='see'" placeholder="请输入任务参数，格式如method(param1,param2,......)"
                  show-word-limit class="limit" />
      </el-form-item>
      <el-form-item label="是否允许并发执行" prop="isConcurrentExecution">
        <el-radio v-model.trim="timerTemp.isConcurrentExecution" :label="1" :disabled="dialogStatus=='see'">是</el-radio>
        <el-radio v-model.trim="timerTemp.isConcurrentExecution" :label="2" :disabled="dialogStatus=='see'">否</el-radio>
        <span v-show="dialogStatus!='see'">说明：任务执行中，是否允许点击"执行一次"并发执行该任务</span>
      </el-form-item>
      <el-form-item v-if="timerTemp.isConcurrentExecution==1" label="最大允许并发数量" prop="maxConcurrentTimes">
        <el-input v-model.trim="timerTemp.maxConcurrentTimes" placeholder="请输入最大允许并发数量，数量>=1" :disabled="dialogStatus=='see'"
                  maxlength="5" show-word-limit class="limit" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model.trim="timerTemp.remark" :autosize="{ minRows: 3, maxRows: 4}" maxlength="100"
                  show-word-limit type="textarea" :disabled="dialogStatus=='see'"
                  class="limit" />
      </el-form-item>
      <el-form-item v-show="dialogStatus=='see'" label="最近一次修改人" prop="updateUserName">
        <el-input v-model.trim="timerTemp.updateUserName" :disabled="dialogStatus=='see'" />
      </el-form-item>
      <el-form-item v-show="dialogStatus=='see'" label="最近一次修改时间" prop="updateTime">
        <el-input v-model.trim="timerTemp.updateTime" :disabled="dialogStatus=='see'" />
      </el-form-item>
      <el-form-item v-show="dialogStatus=='see'" label="创建人" prop="createUserName">
        <el-input v-model.trim="timerTemp.createUserName" :disabled="dialogStatus=='see'" />
      </el-form-item>
      <el-form-item v-show="dialogStatus=='see'" label="创建时间" prop="createTime">
        <el-input v-model.trim="timerTemp.createTime" :disabled="dialogStatus=='see'" />
      </el-form-item>
    </el-form>
  </dtDialog>
</template>
<script>
import sysTimersApi from '@/framework/api/sysTimers'
import { checkNumber } from '@/framework/utils/validate'

export default {
  data() {
    const validateMaxConcurrentTimers = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入最大允许并发数量'))
      } else if (!checkNumber(value)) {
        callback(new Error('请输入0-9数字'))
      } else if (value < 1) {
        callback(new Error('最大允许并发数量>=1'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      textMap: {
        update: '修改定时任务',
        create: '新增定时任务',
        see: '查看任务'
      },
      timerVisible: false,
      timerRules: {
        timerName: [
          { required: true, message: '请输入任务名称', trigger: 'change' }
        ],
        actionClass: [
          { required: true, message: '请选择任务CLASS', trigger: 'change' }
        ],
        cron: [
          { required: true, message: '请生成CRON表达式', trigger: 'change' }
        ],
        isConcurrentExecution: [
          { required: true, message: '请选择是否允许并发执行', trigger: 'change' }
        ],
        maxConcurrentTimes: [
          { required: true, validator: validateMaxConcurrentTimers, trigger: 'change' }
        ],
        params: [
          { required: true, message: '请输入任务参数', trigger: 'change' }

        ]
      },
      timerTemp: {
        timerName: '',
        actionClass: '',
        cron: '',
        params: '',
        remark: '',
        isConcurrentExecution: 2,
        maxConcurrentTimes: null
      },
      dialogStatus: '',
      actionClassList: []
    }
  },
  methods: {
    classChange() {
      this.timerTemp.cron = ''
    },
    addCron() {
      this.$refs.vcrontabRef.showDialog()
    },
    getActionClasses() {
      sysTimersApi.getActionClasses().then((res) => {
        this.actionClassList = res.data
      })
    },
    handleTimer(row, type) {
      if (type == 'create') {
        this.dialogStatus = 'create'
      } else if (type == 'update') {
        this.dialogStatus = 'update'
        sysTimersApi.detail(row.timerId).then((res) => {
          this.timerTemp = res.data
        })
      } else {
        this.dialogStatus = 'see'
        sysTimersApi.detail(row.timerId).then((res) => {
          this.timerTemp = res.data
        })
      }
      this.getActionClasses()
      this.$nextTick(() => {
        this.$refs['timerDataForm'].clearValidate()
      })
      this.timerVisible = true
    },
    resetTimerTemp() {
      this.$refs.timerDataForm.clearValidate()
      this.timerTemp = {
        timerName: '',
        actionClass: '',
        cron: '',
        params: '',
        remark: '',
        isConcurrentExecution: 2,
        maxConcurrentTimes: null
      }
    },
    submit() {
      this.$refs.timerDataForm.validate((valid) => {
        if (valid) {
          this.loading = true
          try {
            if (this.dialogStatus == 'create') {
              sysTimersApi.add(this.timerTemp).then((res) => {
                this.$dtMessage({
                  title: '成功',
                  message: '新增成功',
                  type: 'success',
                  duration: 2000
                })
                this.timerVisible = false
                this.$parent.getList()
              })
            } else {
              sysTimersApi.edit(this.timerTemp).then((res) => {
                this.$dtMessage({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
                this.timerVisible = false
                this.$parent.getList()
              })
            }
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>
